<template>
  <swiper
    class="swiper"
    :indicator-dots="dots"
    :circular="true"
    :autoplay="autoplay"
    :current="current"
    @change="change"
    :style="{ height: heights + 'rpx' }"
  >
    <swiper-item v-for="(item, index) of List" :key="item.imgId">
      <image
        @click="enlarge(index)"
        mode="scaleToFill"
        class="image"
        :src="item.imgUrl || item.imageurl"
        :style="{ height: height + 'rpx' }"
      ></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  props: {
    List: {
      type: Array
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    dots: {
      type: Boolean,
      default: true
    },
    current: {
      type: Number,
      default: 0
    },
    heights: {
      type: Number,
      default: 450
    },
    height: {
      type: Number,
      default: 450
    }
  },
  methods: {
    change(e) {
      this.$emit('currents', e.detail.current)
    },
    enlarge(index) {
      this.$emit('enlarge', index)
    }
  }
}
</script>

<style lang="less" scoped></style>
